import { React, useState, useEffect, useRef } from 'react'
import { Toast } from 'antd-mobile'
import { useNavigate, useLocation} from "react-router-dom";
import { useTranslation } from "react-i18next";
import { LeftOutline } from 'antd-mobile-icons'
import { Empty } from 'antd-mobile'
import data from '../utils/phone'
import './area.css'

export default function Area() {
  const { t, i18n } = useTranslation();
  const [datas, setDatas] = useState(data.data)
  const [value, setValue] = useState('')
  const location = useLocation();
  let navigate = useNavigate();
  const [type, setType] = useState('')
  useEffect(() => {
    setType(location.state)
  }, [])
  const itemClick = (val) => {
    if (type == 1) {
      navigate('/Login', { state: val })
    } else {
      navigate('/Register', { state: val })
    }
  }
  const confirmVal = (value) => {
    setValue(value)
    if (!value) {
      setDatas(data.data)
    } else {
      const list = data.data.filter(item => item.phone_code.includes(value))
      setDatas(list)
    }

   // if (type == 1) {
     // navigate('/Login', { state: value })
    //} else {
      //navigate('/Register', { state: value })
    //}
  }
  return (
    <div>
      <div className='header'>
        <div className='backIcon' onClick={() => { navigate(-1) }}>
          <LeftOutline />
        </div>
        <p>{t('qy1')}</p>
      </div>
      <div className='area_box'>
        <div className='input_area'>
          <p>+</p>
          <input type="number" value={value || ""} onChange={(e) => confirmVal(e.target.value)} />
          {/*<input type="number" value={value || ""} onChange={(e) => { setValue(e.target.value) }} />*/}
          {/*<p onClick={confirmVal}> {t('ty1')} </p>*/}
        </div>
        <div className='area_list'>
          {
            datas.length ? datas.map((item, index) => {
              return (
                <div key={index} className="area_item" onClick={() => { itemClick(item.phone_code) }}>
                  <img src={item.country_img} alt="" />
                  <p>+{item.phone_code}</p>
                </div>
              )
            }) : <Empty style={{ padding: '100px 0' }} description={t('t25')} />
          }
        </div>
      </div>
    </div >
  )
}
